<template>
  <div>
    <van-nav-bar
      title="发布房源"
      left-arrow
      @click-left="$router.go(-1)"
    />
<div class="main">
  <van-cell title="房源信息" class="title"  />
  <van-field 
  @click="search"
  label="小区名称"
>
  <template #button>
    {{$store.state.city.communityName || '请输入小区名称'}}<van-icon name="arrow" />
  </template>
</van-field>
  <van-field v-model="houseObj.price" label="租金" placeholder="请输入租金/月" >
 <template #right-icon>
  ￥/月
  </template>
  </van-field>
   <van-field v-model="houseObj.size" label="建筑面积" placeholder="请输入建筑面积" >
 <template #right-icon>
  m²
  </template>
  </van-field>  
  <van-cell is-link @click="showPopup">户型  <input type="text" class="inpright" v-model="roomType" disabled placeholder="请选择" > </van-cell>
<van-popup v-model="show" position="bottom" :style="{ height: '30%' }">
  <van-picker
  item-height="30"
  show-toolbar
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"
 
/>
</van-popup>
  <van-cell is-link @click="showPopup1">所在楼层  <input type="text" class="inpright" v-model="floor" disabled placeholder="请选择" > </van-cell>
<van-popup v-model="show1" position="bottom" :style="{ height: '30%' }">
  <van-picker
  item-height="30"
  show-toolbar
  :columns="floorList"
  @confirm="onConfirm1"
  @cancel="onCancel1"
 
/>
</van-popup>

  <van-cell is-link @click="showPopup2">朝向  <input type="text" class="inpright" v-model="oriented" disabled placeholder="请选择" > </van-cell>
<van-popup v-model="show2" position="bottom" :style="{ height: '30%' }">
  <van-picker
  item-height="30"
  show-toolbar
  :columns="directionList"
  @confirm="onConfirm2"
  @cancel="onCancel2"
 
/>
</van-popup>
 <van-form>
      <van-cell title="房屋标题"></van-cell>
      <van-field
        v-model="houseObj.title"
        placeholder="请输入标题(例如:整租 小区名 2室 5000元)"
      />
    </van-form>
    <!-- 房屋图像 -->
    <van-cell title="房屋图像"></van-cell>
    <van-field name="uploader" >
  <template #input>
    <van-uploader v-model="uploader" />
  </template>
</van-field>
<van-cell title="房屋配置"></van-cell>
<div class="housepeizhi">
  <van-grid :column-num="5" :border="false">
  <van-grid-item  v-for="(item,index) in total.supporting" :key="item.value" :ref="index" @click="choosePz(index)">
    <template #icon>
      <i :class="`iconfont ${iconList[index]}`"></i>
    </template>
     <template #text >
      <span class="icname" >{{item.label}}</span>
    </template>
</van-grid-item >
</van-grid>
</div>
 <van-form >
      <van-cell title="房屋描述"></van-cell>
      <van-field 
      type="textarea"
        rows="5"
        v-model="houseObj.description"
        placeholder="请输入房屋描述信息"
      />
    </van-form>
</div>

<!-- 底部提交 -->
    <footer>
      <div class="left" @click="cancel">取消</div>
      <div class="right" @click="beforeRent" >提交</div>
    </footer>
  </div>
</template>

<script>
import {rentHouseCondition,rentHouseImage,rentHouseGo} from '@/api/house'
import { Dialog } from 'vant'
import {roomType1,floor1,oriented1} from '@/utils/house'
export default {
  name: 'RentHouse',
async  created(){
    const res= await rentHouseCondition()
    
    this.total=res.body
    
     this.total.floor.forEach(item =>this.floorList.push(item.label) )
     this.total.roomType.forEach(item =>this.columns.push(item.label) )
     this.total.oriented.forEach(item =>this.directionList.push(item.label) )
  },
  props: {},
  components: {},
  data() {
    return {
      houseObj:{
        title:'',
        oriented:'',
         floor:'',
         roomType:'',
         price:'',
         size:'',
         description:'',
         houseImg:'',
         community:this.$store.state.city.community,
         supporting:''
      },
       oriented:'',
       floor:'',
       roomType:'',
       uploader: [],
       total:{},
       iconList:[
         'icon-shequhuodong', 'icon-bingxiang','icon-xiyiji','icon-xiyifang','icon-reshuiqi','icon-xiuxishi','icon-nuanqi','icon-kuandai','icon-yigui','icon-tianranqi'
       ],
       supportingList:[],
      show: false,
      show1:false,
      show2:false,
      columns:[],
      floorList:[],
      directionList:[]
    }
  },
  methods: {
    onCancel(){
      this.show=!this.show
    },
    onCancel1(){
      this.show1=!this.show1
    },
    onCancel2(){
      this.show2=!this.show2
    },
    onConfirm(value){
      this.roomType=value
       this.houseObj.roomType = roomType1[value]
        this.show=!this.show
       
    },
    onConfirm1(value){
       this.floor=value
        this.houseObj.floor=floor1[value]
        this.show1=!this.show1
        
    },
     onConfirm2(value){
      this.oriented=value
        this.houseObj.oriented=oriented1[value]
        this.show2=!this.show2
       
    },
    showPopup(){
      this.show =true
    },
    showPopup1(){
      this.show1 =true
    },
    showPopup2(){
      this.show2 =true
    },
    cancel(){
       Dialog.confirm({
        title: '提示',
        message: '放弃发布房源？',
        confirmButtonColor:'#108ee9',
        confirmButtonText:'继续编辑',
        cancelButtonText:'放弃'

      })
        .then(() => {
          // on confirm
          
        })
        .catch(() => {
          // on cancel
          this.$router.push('/manageHouse')
        })
    },
    choosePz(index){
      
       if(!this.$refs[index][0].$el.classList.contains('green')){
         this.$refs[index][0].$el.classList.add('green')
         this.supportingList.push(this.$refs[index][0].$el.innerText)
        
       }else{
        this.$refs[index][0].$el.classList.remove('green')
         if(this.supportingList.includes(this.$refs[index][0].$el.innerText)){
          this.supportingList =this.supportingList.filter(item => item !== this.$refs[index][0].$el.innerText)
         }
       }
     
      this.houseObj.supporting= this.supportingList.join('|')
      console.log(this.houseObj.supporting);
      
    },
    search(){
      this.$router.push('/search')
    },
   async beforeRent(){
        const formdata = new FormData()
      this.uploader.forEach(item => {
        formdata.append('file', item.file)
      })
      const res = await rentHouseImage(formdata)
      
      this.houseObj.houseImg = res.body.join('|')
    
      try {
        if(this.houseObj.houseImg.length){
           const res1= await rentHouseGo(this.houseObj)
        if(res1.status ===200){
          this.$toast.success('发布成功')
          this.$router.push('/manageHouse')
        }
        } else{
             this.$toast('请上传图片')
        }
      } catch (error) {
          this.$toast.fail('发布失败')
      }
    }
  },


}
</script>

<style scoped lang="less">
.green{
  color: #21b97a;
}
.main{
  margin-bottom: 45px;
}
/deep/ .title .van-cell__title {
  color: #21b97a;
}
.inpright{
  float: right;
  background-color: #fff;
  border: none;
  text-align: right;
   color: #969799;
}
.inpright::placeholder {
  text-align: right;
   color: #969799;
}
footer{
  
  display: flex;
  position: fixed;
  bottom: 0;
  align-items: center;
  width: 100%;
  height: 45px;
  .left{
    background-color: #fff;
    color: #21b97a;
    height: 100%;
    width: 50%;
    line-height: 45px;
    text-align: center;
  }
  .right{
     background-color: #21b97a;
    color: #fff;
    height: 100%;
    width: 50%;
    line-height: 45px;
    text-align: center;
  }
  .housepeizhi{
    margin-bottom: 10px;
  }

}
</style>
